
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<base href="<%=basePath%>">
<title>环境地图</title>
<LINK href="./css/style.css" type=text/css rel=stylesheet>
<script src="./js/WebCalendar.js" type="text/javascript"></script>
<script src="./js/date.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.validate.min.js" type="text/javascript"></script>
<script src="./js/validate.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #5CB7FE;
}
#mapwarpper {
    padding: 0;
	height: 500px;
}
.STYLE1 {font-size: 12px}
.error {background-color: red;}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.STYLE5 {font-size: 12px; color: #FF0000; }
.STYLE6 {
	font-size: 16px;
	font-weight: bold;
}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
-->
 </style>
</head>
<body>
<table width="100%" height="568" border="0" cellpadding="0"
	cellspacing="0" bordercolor="#D8EDFF">
	<!--DWLayoutTable-->
	<tr>
		<td height="8" colspan="4" valign="top"></td>
		<td width="98%" valign="top"></td>
		<td width="5" valign="top"></td>
	</tr>
	<tr>
		<td height="5" colspan="3" align="right" valign="top"><img
			src="images/icon1.jpg" width="6" height="5" /></td>
		<td colspan="2" valign="top"><img src="images/icon2.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon3.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td width="7" height="523">&nbsp;</td>
		<td width="5" align="right" valign="top" background="images/icon5.jpg"><img
			src="images/icon5.jpg" width="5" height="5" /></td>
		<td colspan="2" valign="top" bgcolor="#D8EDFF">&nbsp;</td>
		<td valign="top" background="images/main_bg.png">
		<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="STYLE1"
			bgcolor="#D8EDFF">
			<!--DWLayoutTable-->
			<tr>
				<td height="50" width="300" valign="middle"><span class="STYLE1">
				&nbsp;日期时间:<input name="date" type="text" id="date" onclick="new Calendar().show(this);" size="10" maxlength="10" style="width:80px; height:18px;" readonly="readonly" value=""/>
				&nbsp;<select id='time' style="width:80px; height:18px;"></select>
				<input name="Submit2" type="submit" id="reQuery" class="btn1_mouseout" onMouseOver="this.className='btn1_mouseover'" onMouseOut="this.className='btn1_mouseout'" value="更新数据">
				</span></td>
				<td class="STYLE1" width="40%" align="right">
				    <span id="loading" style="background-color: yellow;">正在加载数据...</span>
				    &nbsp;&nbsp;污染物:&nbsp;
				     <select id='pollutant' style="width:90px; height:18px;">
				          <option value="PM2_5">PM2.5</option>
				          <option value="PM10">PM10</option>
				          <option value="SO2">SO2</option>
				          <option value="NO2">NO2</option>
				          <option value="CO">CO</option>
				          <option value="O3">O3(1小时)</option>
				          <option value="O3_8H">O3(8小时)</option>
				          <option value="O3_24H">O3(24小时)</option>
				          <option value="O3_8H_24H">O3(8-24小时)</option>
				          </select>
				</td>
				<td><img height="30px" width="260px" src="images/PM2_5.png" id="illustration"><span id="unit">(µg/m³)</span></td>
			</tr>
			<tr>
				<td width="98%" height="100%" colspan="4" valign="top">
		   			<fieldset id="mapwarpper"><div id="allmap"></div></fieldset>
				</td>
			</tr>
</table>
		</td>
		<td valign="top" background="images/icon6.jpg"><img
			src="images/icon6.jpg" width="5" height="100" /></td>
	</tr>

	<tr>
		<td height="5"></td>
		<td valign="top"><img src="images/icon7.jpg" width="5" height="5" /></td>
		<td colspan="3" valign="top"><img src="images/icon8.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon9.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td height="2"></td>
		<td></td>
		<td width="1"></td>
		<td width="6"></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
<script type="text/javascript">
var m0 = 'images/m0.png';
var m1 = 'images/m1.png';
var m2 = 'images/m2.png';
var m3 = 'images/m3.png';
var m4 = 'images/m4.png';
var m5 = 'images/m5.png';
var m6 = 'images/m6.png';

var marker_arr = new Array();

var map = new google.maps.Map(document.getElementById('allmap'), {
      zoom: 10,
      center: new google.maps.LatLng(31.236289, 121.469908),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
 
// 编写自定义函数,创建标注
function addMarker(labelTxt, latitude, longitude, icon, data){
    var mydata = data;
    if (data < 0) {
        mydata = '-';
    }
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(latitude, longitude),
      map: map,
	  label:labelTxt,
	  icon: icon,
	  title: labelTxt + " " + mydata
    });
    marker_arr.push(marker);
}

function destoryMarker() {
	for ( var i=0 ; i < marker_arr.length ; ++i ) {
		var mar = marker_arr[i];
		mar.setMap(null);
	}
	marker_arr = new Array();
}

function setPoistion(position_name, latitude, longitude, showData) {
    if (position_name == "" || latitude == "" || longitude == "") 
		return;
    var image = getImage($("#pollutant").val(), showData);
    addMarker(position_name, latitude, longitude, image, showData);
}

function getImage(pollutant, pollutantData) {
	var image = m0;
	if (pollutant == "PM2_5") {
		if (pollutantData > 0 && pollutantData <= 35) {
	    	image = m1;
	    } else if (pollutantData > 35 && pollutantData <=75) {
	        image = m2;
	    } else if (pollutantData > 75 && pollutantData <=115) {
	        image = m3;
	    } else if (pollutantData > 115 && pollutantData <=150) {
	        image = m4;
	    } else if (pollutantData > 150 && pollutantData <=250) {
	        image = m5;
	    } else if (pollutantData > 250) {
	        image = m6;
	    }
	} else if (pollutant == "PM10") {
		if (pollutantData > 0 && pollutantData <= 50) {
	    	image = m1;
	    } else if (pollutantData > 50 && pollutantData <=150) {
	        image = m2;
	    } else if (pollutantData > 150 && pollutantData <=250) {
	        image = m3;
	    } else if (pollutantData > 250 && pollutantData <=350) {
	        image = m4;
	    } else if (pollutantData > 350 && pollutantData <=420) {
	        image = m5;
	    } else if (pollutantData > 420) {
	        image = m6;
	    }
	} else if (pollutant == "CO") {
		if (pollutantData > 0 && pollutantData <= 2) {
	    	image = m1;
	    } else if (pollutantData > 2 && pollutantData <=4) {
	        image = m2;
	    } else if (pollutantData > 4 && pollutantData <=14) {
	        image = m3;
	    } else if (pollutantData > 14 && pollutantData <=24) {
	        image = m4;
	    } else if (pollutantData > 24 && pollutantData <=36) {
	        image = m5;
	    } else if (pollutantData > 36) {
	        image = m6;
	    }
	} else if (pollutant == "SO2") {
		if (pollutantData > 0 && pollutantData <= 50) {
	    	image = m1;
	    } else if (pollutantData > 50 && pollutantData <=150) {
	        image = m2;
	    } else if (pollutantData > 150 && pollutantData <=475) {
	        image = m3;
	    } else if (pollutantData > 475 && pollutantData <=800) {
	        image = m4;
	    } else if (pollutantData > 800 && pollutantData <=1600) {
	        image = m5;
	    } else if (pollutantData > 1600) {
	        image = m6;
	    }
	} else if (pollutant == "NO2") {
		if (pollutantData > 0 && pollutantData <= 40) {
	    	image = m1;
	    } else if (pollutantData > 40 && pollutantData <=80) {
	        image = m2;
	    } else if (pollutantData > 80 && pollutantData <=180) {
	        image = m3;
	    } else if (pollutantData > 180 && pollutantData <=280) {
	        image = m4;
	    } else if (pollutantData > 280 && pollutantData <=565) {
	        image = m5;
	    } else if (pollutantData > 565) {
	        image = m6;
	    }
	} else if (pollutant == "O3") {
		if (pollutantData > 0 && pollutantData <= 160) {
	    	image = m1;
	    } else if (pollutantData > 160 && pollutantData <=200) {
	        image = m2;
	    } else if (pollutantData > 200 && pollutantData <=300) {
	        image = m3;
	    } else if (pollutantData > 300 && pollutantData <=400) {
	        image = m4;
	    } else if (pollutantData > 400 && pollutantData <=800) {
	        image = m5;
	    } else if (pollutantData > 800) {
	        image = m6;
	    }
	} else if (pollutant == "O3_8H" || pollutant == "O3_24H" || pollutant == "O3_8H_24H") {
		if (pollutantData > 0 && pollutantData <= 100) {
	    	image = m1;
	    } else if (pollutantData > 100 && pollutantData <=160) {
	        image = m2;
	    } else if (pollutantData > 160 && pollutantData <=215) {
	        image = m3;
	    } else if (pollutantData > 215 && pollutantData <=265) {
	        image = m4;
	    } else if (pollutantData > 265 && pollutantData <=800) {
	        image = m5;
	    } else if (pollutantData > 800) {
	        image = m6;
	    }
	}
	return image;
}

function getAndShowMapData() {
    destoryMarker();
    var mydata = {};  
    mydata["timepoint"] = $("#date").val() + " " + $("#time").val();
    mydata["pollutant"] = $("#pollutant").val();
    $.ajax({
	    url:'envMapData.action?t='+Math.random(),  
	    type:'GET',  
	    data:mydata,
	    dataType:'json',
	    timeout: 10000,
	    success:function (data) {
	    	$("#time").innerHTML = "";
	        $.each(data.positionDataMap,function(key, value){
	            if (key == "latestTime") {
	                var timepoint = value.split(' ');
	                var i;
	                $("#date").val(timepoint[0]);
	                var latestHour = timepoint[1].split(':')[0];
	                var hourVal;
	                for (i=0; i<24; i++) {
	                    var hour;
	                    if (i < 10) {
	                        hour = "0" + i;
	                    } else {
	                    	hour = i;
	                    }
	                    hourVal=hour+":00:00";
						$("#time").append("<option value='"+hourVal+"'>"+hourVal+"</option>");
						if (latestHour == hour) {
						    $("#time").val(hourVal);
						}       
	                }
	            } else if (key == "positionDataList") {
	                if (value == "") {
	                   $("#loading").html("该时段没有数据!");
	                   return false;
	                } else {
					   $(value).each(function (j, positionData) {
			    	   setPoistion(positionData.position_name, positionData.latitude, positionData.longitude, positionData.showData);
			    	});	                
	                }
	            }
		    	$("#loading").hide();
	        });
	    }
    });
}

$(document).ready(function() {
	getAndShowMapData();
	
	$("#pollutant").change(function(){
		var val = $("#pollutant").val();
		$("#illustration").attr("src","images/"+val+".png");
		if (val == "CO") {
			$("#unit").html("mg/m³");		
		} else {
			$("#unit").html("µg/m³");		
		}
		$("#loading").show();
		$("#loading").html("正在加载数据...");
		getAndShowMapData();
	});
	
	$("#reQuery").click(function(){
	    $("#loading").show();
	    $("#loading").html("正在加载数据...");
	    getAndShowMapData();
	});
});
</script>
</html>
